<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Bookmarks Viewer - Options</title>
<link rel="stylesheet" type="text/css" href="options.css" />
</head>

<body>
    <div id="header"><h1>Bookmarks Viewer Options</h1></div>

    <div class="section-header first">Heading</div>
    <p>Enter the heading you want to appear above your bookmarks (leave blank for none)</p>
    <p>
        <label for="heading">Heading: </label>
        <input type="text" id="heading" name="heading" oninput="markDirty()" />
    </p>

    <div class="section-header">Background</div>
    <p>Configure how you want the background to appear</p>
    <table>
        <tr>
            <td>
                <label for="backgroundColor">Color: </label>
            </td>
            <td>
                <input type="text" id="backgroundColor" name="backgroundColor" oninput="markDirty()" />
                <span>(e.g. #FF0000)</span>
            </td>
        </tr>
        <tr>
            <td>
                <label for="backgroundImage">Image: </label>
            </td>
            <td>
                <input type="text" id="backgroundImage" name="backgroundImage" oninput="markDirty()" />
                <span>(e.g. http://imgur.com/UinAX.png)</span>
            </td>
        </tr>
    </table>

    <div class="section-header">Miscellaneous</div>
    <form name="miscellaneous">
        <table>
            <tr>
                <td>
                    <label for="numColumns">Number of columns: </label>
                </td>
                <td>
                    <input type="text" id="numColumns" name="numColumns" size="1" oninput="markDirty()" />
                </td>
            </tr>
            <tr>
                <td>
                    <label for="showFavicons">Show favicons:</label>
                </td>
                <td>
                    <input type="checkbox" id="showFavicons" name="showFavicons" onchange="markDirty()" />
                </td>
            </tr>
            <tr>
                <td>
                    <label for="alphabetize">List alphabetically:</label>
                </td>
                <td>
                    <input type="checkbox" id="alphabetize" name="alphabetize" onchange="markDirty()" />
                </td>
            </tr>
            <tr>
                <td>
                    <label for="openInNewTab">Open bookmarks in new tabs:</label>
                </td>
                <td>
                    <input type="checkbox" id="openInNewTab" name="openInNewTab" onchange="markDirty()" />
                </td>
            </tr>
            <tr>
                <td>
                    <label for="autoExpand">Automatically expand folders:</label>
                </td>
                <td>
                    <input type="checkbox" id="autoExpand" name="autoExpand" onchange="markDirty()" />
                </td>
            </tr>
        </table>
    </form>

    <div id="footer">
        <button id="save-button" style="font-weight:bold" onclick="save()" disabled="">Save</button>
        <button onclick="init()">Cancel</button>
    </div>

    <script type="text/javascript">
        var headingTextbox;
        var backgroundColorTextbox;
        var backgroundImageTextbox;
        var numColumnsTextbox;
        var faviconForm;
        var alphabetizeForm;
        var newTabForm;
        var autoExpandForm;
        var saveButton;

        init();

        function init() {
            headingTextbox = document.getElementById("heading");
            backgroundColorTextbox = document.getElementById("backgroundColor");
            backgroundImageTextbox = document.getElementById("backgroundImage");
            numColumnsTextbox = document.getElementById("numColumns");
            faviconForm = document.miscellaneous.showFavicons;
            alphabetizeForm = document.miscellaneous.alphabetize;
            newTabForm = document.miscellaneous.openInNewTab;
            autoExpandForm = document.miscellaneous.autoExpand;
            saveButton = document.getElementById("save-button");

            headingTextbox.value = localStorage.heading || "";
            backgroundColorTextbox.value = localStorage.backgroundColor || "";
            backgroundImageTextbox.value = localStorage.backgroundImage || "";
            numColumnsTextbox.value = localStorage.numColumns || "2";
            
            if (!localStorage.showFavicons || localStorage.showFavicons == "true") {
                faviconForm.checked = true;
            }

            if (!localStorage.alphabetize || localStorage.alphabetize == "true") {
                alphabetizeForm.checked = true;
            }

            if (localStorage.openInNewTab == "true") {
                newTabForm.checked = true;
            }

            if (localStorage.autoExpand == "true") {
                autoExpandForm.checked = true;
            }

            markClean();
        }

        function save() {
            localStorage.heading = headingTextbox.value;
            localStorage.backgroundColor = backgroundColorTextbox.value;
            localStorage.backgroundImage = backgroundImageTextbox.value;
            localStorage.numColumns = numColumnsTextbox.value;

            // TODO: loop/function?
            if (faviconForm.checked) {
                localStorage.showFavicons = true;
            } else {
                localStorage.showFavicons = false;
            }

            if (alphabetizeForm.checked) {
                localStorage.alphabetize = true;
            } else {
                localStorage.alphabetize = false;
            }

            if (newTabForm.checked) {
                localStorage.openInNewTab = true;
            } else {
                localStorage.openInNewTab = false;
            }

            if (autoExpandForm.checked) {
                localStorage.autoExpand = true;
            } else {
                localStorage.autoExpand = false;
            }

            markClean();
        }

        function markDirty() {
            saveButton.disabled = false;
        }

        function markClean() {
            saveButton.disabled = true;
        }
    </script>
</body>
</html>

